import React, { InputHTMLAttributes, useEffect, useRef } from 'react'
import styles from '../Input/index.module.scss'
import classNames from 'classnames'

// interface Props extends InputHTMLAttributes<HTMLInputElement> {
//   extra?: string
//   onExtraClick?: () => void
//   className?: string
//   autoFocus?: boolean
// }

type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'autoFocus'> & {
  extra?: string
  onExtraClick?: () => void
  className?: string
  autoFocus?: boolean
  type?: 'text' | 'password'
}
export default function Input({ extra, onExtraClick, className, autoFocus, ...rest }: Props) {
  // focus
  const inputRef = useRef<HTMLInputElement>(null)
  useEffect(() => {
    if (autoFocus) {
      inputRef.current!.focus()
    }
  }, [autoFocus])
  return (
    <div className={styles.root}>
        <input 
          ref={inputRef} 
          className={classNames('input', className)} 
          { ...rest } 
        />
        { extra && (
            <div className='extra' onClick={onExtraClick}>
                {extra}
            </div>
        ) }
    </div>
  )
}
